<template>
  <div class="bg-box">
    <Nav></Nav>
    <div class="main-box">
      <div style="font-weight: 500px; font-size: 24px; margin: 5px 0px 5px 5px">
        代码文件提交
      </div>
      <!-- <div class="file-box"> -->
      <el-upload
        class="upload-demo"
        drag
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
        :data="{
          a:'1234'
        }"
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>

        <div class="el-upload__text">文件拖到此处上传</div>
        <div class="join">上传文件</div>
        <div style="margin-top: 20px">
          只支持特定文件格式上传，请勿上传其他格式文件
        </div>
        <template #tip>
          <div class="el-upload__tip">上传文件大小请小于500kb</div>
        </template>
      </el-upload>
    </div>
  </div>
  <!-- </div> -->
</template>

<script setup>
import Nav from "@/components/Nav.vue";
import { UploadFilled } from "@element-plus/icons-vue";
</script>

<style scoped>
.bg-box {
  background-color: #eee;
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-box {
  width: 1200px;
  height: 550px;
  margin-top: 70px;
  margin-bottom: 70px;
  background-color: #ffffff;
}

.file-box {
  width: 1000px;
  height: 400px;
  top: 50%;
  margin-top: -200px;
  margin: 0 auto;
  border: 1px solid #979797;
}

.join {
  width: 120px;
  background-color: #2979ff;
  height: 50px;
  line-height: 50px;
  margin-top: 20px;

  margin-left: 530px;
  align-items: center;
  color: white;
  cursor: pointer;
  user-select: none;
  text-align: center;
}
</style>